<template>
  <div class="row-component">
    <el-row 
      :gutter="datas.gutter" 
      :justify="datas.justify" 
      :align="datas.align"
      :style="{ backgroundColor: datas.backgroundColor }"
    >
      <el-col 
        v-for="(column, index) in datas.columns" 
        :key="index" 
        :span="column.span"
      >
        <div class="grid-content">
          {{ column.content }}
        </div>
      </el-col>
    </el-row>

  </div>
</template>

<script>
export default {
  name: 'row',
  props: {
    datas: {
      type: Object,
      required: true
    },
  },
}
</script>

<style scoped lang="less">
.row-component {
  position: relative;
  margin: 10px 0;
  
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
    background-color: #f5f7fa;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
  }
}
</style> 